<script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
 <link href="${ctxPath}/static/css/myIconStyle.css" rel="stylesheet">
<style>
.companyLogo{background:#ffffff;height:60px;line-height:60px;}
.companyLogo img{ padding-left:25px}
#wrapper{background:#195c8c}

.sidebar-collapse .nav > li > a{color:rgba(163,175,183,.9);}
.sidebar-collapse .nav > li > .nav > li > a{    color: rgba(163,175,183,.9);
    padding: 10px 0px 10px 0px;
    margin-left: 30px;
    border-bottom: 1px solid #5d5d5d;}
.sidebar-collapse .nav > li > .nav > li:last-child > a{
    border-bottom: 0;
}
.fa-angle-right{float:right}
.sidebar-collapse .nav > li.active{border-left:0;background-color: #161d25;color: #4e97d9;}
.sidebar-collapse .nav > li.active a{color: #4e97d9;}
.sidebar-collapse .nav > li.active .nav{background:#263238;}
.sidebar-collapse .nav > li.active .nav> li a:focus,.nav > li.active .nav> li a:hover{
    border-left:0;background-color: #161d25;color: #4e97d9;}
.sidebar-collapse .nav > li > .nav > li > a:hover,
.sidebar-collapse .nav > li > .nav > li > a:focus{
    border-left:0;background-color: #263238!important;color: #4e97d9;
}
.nav-second-level li a {
    padding: 10px 15px 10px 10px;
    padding-left: 47px;
}
.sidebar-collapse .nav-second-level li:last-child {
     margin-bottom:0px; 
}
.navbar-static-side{background:#383d41;}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background-color: #383d41;
    color: #4e97d9;
}
.rotate90{
transform:rotate(90deg);
-ms-transform:rotate(90deg); 	/* IE 9 */
-moz-transform:rotate(90deg); 	/* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); 
}

.page-tabs a{text-decoration:none}
.page-tabs a.active:hover, .page-tabs a.active i:hover{color: #777;
    background: #f2f2f2;
    cursor: pointer;}
.nav-close{    display: inline-block;
    width: 100%;
    position: static;
    text-align: center;}
body.fixed-sidebar .navbar-static-side, body.canvas-menu .navbar-static-side{width: 140px}
#page-wrapper{margin: 0 0 0 140px;}
body.fixed-sidebar.mini-navbar .navbar-static-side{width: 50px}
body.fixed-sidebar.mini-navbar #page-wrapper{margin: 0 0 0 50px;}
.nav-close{padding:0;background:#000000}
</style>
<script>
	$(function(){
		$('.sidebar-collapse .nav>li').click(
				function(){
					$('.fa-angle-right').removeClass('fa-angle-down');
					$('.active .fa-angle-right').addClass('fa-angle-down');
					
				}
		);
	});
</script>
<nav class="navbar-default navbar-static-side" role="navigation">
    <!--<div class="nav-close">-->
    	<!--<i class="fa fa-reorder " style="color:#ffffff" id="navHead"></i>-->
    <!--</div> -->
    <div class="sidebar-collapse">
        <ul class="nav" id="side-menu">
        	
            @for(title in titles){
                @if(tool.isEmpty(title.children)){
                    <li>
                        <a class="J_menuItem" href="${ctxPath}${title.url}" name="tabMenuItem">
                           <i class="${title.icon}" title="${title.name}"></i>
                            <span class="nav-label" >${title.name}</span>
                        </a>
                    </li>
                @}else{
                    <li>
                        <a href="###">
                        <i class="${title.icon}"  title="${title.name}"></i>
                            <span class="nav-label">${title.name}</span>
                            <span class="fa  fa-angle-right" style="margin-top: 4px;"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            @for(subTitle in title.children){
                                @if(tool.isEmpty(subTitle.children)){
                                    <li>
                                        <a class="J_menuItem" href="${ctxPath}${subTitle.url}" name="tabMenuItem">●　${subTitle.name}</a>
                                    </li>
                                @}else{
                                    <li>
                                        <a href="###">${subTitle.name} <span class="fa arrow"></span></a>
                                        <ul class="nav nav-third-level">
                                            @for(thirdTitle in subTitle.children){
                                            <li>
                                                <a class="J_menuItem" href="${ctxPath}${thirdTitle.url}" name="tabMenuItem">${thirdTitle.name}</a>
                                            </li>
                                            @}
                                        </ul>
                                    </li>
                                @}
                            @}
                        </ul>
                    </li>
                @}
            @}

        </ul>
    </div>
</nav>
